<!--
 * @Description: 首页
 * @Author: lucl
 * @Date: 2021-06-29 09:28:57
 * @LastEditors: lucl
 * @LastEditTime: 2021-07-01 21:55:25
-->
<template>
  <div class="zongjie">
    <!-- <van-button type="primary">主要按钮</van-button>-->
    <div class="beijing">

    </div>
    <!-- 首页index -->
    <div class="tu">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="item in photo" :key="item.id">
          <img
            width="100%"
            style="border-radius: 8px"
            height="140px"
            :src="item.url"
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 中间按钮 -->
    <div>
      <van-grid route class="anniu">
        <van-grid-item style="color:#FF6666" to="/order" icon="balance-list" text="订单" />
        <van-grid-item style="color:#FF6666" to='/money' icon="gold-coin" text="收益" />
        <van-grid-item style="color:#FF6666" icon="info" text="帮助" />
        <van-grid-item style="color:#FF6666" to='/mine' icon="smile" text="我的" />
      </van-grid>
    </div>
    <!-- 订单 -->
    <div class="order_data">
      <span style="font-size:16px;margin-left:10px;">我的订单</span>
      <div @click="todetail(item.id)" class="ka" v-for="item in order_message" :key="item.id">
        <!-- 卡片数据 -->
        <div class="juzhong">
          <!-- 卡片头像 -->
          <div class="tou">
            <!-- 头像 -->
            <img width="100%" style="border-radius: 50%;" height="100%" :src="item.customer.userFace" alt="" />
          </div>
          <!-- 中间数据 -->
          <div class="you">
            <!-- 左上角数据   用户名 -->
            <div class="name">
              {{item.customer.username}}
            </div>
            <!-- 地址数据 -->
            <span class="zhong">{{item.address.province+item.address.city+item.address.area+item.address.address}}</span>
            <!-- 时间数据 -->
            <div class="shijian">
              {{item.orderTime | time}}
            </div>
            <!-- 状态数据 -->
            <div class="zhuangtai">
              {{item.status}}
            </div>
            <!-- 单价信息 -->
            <div class="danjia">
              {{item.total}}￥
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
import { query } from "@/api/home";
import { getToken } from "@/utils/auth"
import { info } from "@/api/user"
import {pageQuery  } from "@/api/order"
import Moment from 'moment'
export default {
  data() {
    return {
      photo: "",
      order_message:{},
    };
  },
  computed: {},
  filters: {
      // 转化时间戳
      time(value){
        return Moment(value).format('YYYY-MM-DD hh:mm:ss')
      }
},

  methods: {
    // 路由跳转至订单的详情
    todetail(res){
      this.$router.push({
        path:'/order_detail',
        query:{
          id:res
        }
      })
    },
    // 订单信息
    async order(){
      // 获取token值
      let a ={
        token:getToken()
      }
      // 发送token获取个人id
      let res = await info(a)
      // 发送个人id查找订单信息
      let pramas={
        employeeId:res.data.id,
        page:1,
        pageSize:10000,
      }
      let response = await pageQuery (pramas)
      this.order_message=response.data.list;
      // console.log(response)

      // console.log(token)
    },
    // 轮播图
    async Carousel_map() {
      let status = "正常";
      let res = await query(status);
      // console.log(res);
      this.photo = res.data;
    },
  },
  created() {
    this.Carousel_map();
    this.order();
  },
  mounted() {},
};
</script>
<style scoped>
.zongjie{
  position: relative;
}
.beijing{
  height: 180px;
  width: 100%;
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
  /* background-color: dodgerblue;
   */
   background-image: linear-gradient(
      to bottom,
      hsl(329.88, 100%, 50%) 0%,
      hsl(329.2, 100%, 49.81%) 8.1%,
      hsl(327.31, 100%, 49.27%) 15.5%,
      hsl(324.42, 100%, 48.42%) 22.5%,
      hsl(320.75, 100%, 47.31%) 29%,
      hsl(316.42, 100%, 45.97%) 35.3%,
      hsl(311.55, 100%, 44.44%) 41.2%,
      hsl(306.18, 100%, 42.77%) 47.1%,
      hsl(300.39, 100%, 40.99%) 52.9%,
      hsl(294.76, 100%, 42.92%) 58.8%,
      hsl(289.93, 100%, 44.89%) 64.7%,
      hsl(285.89, 100%, 46.6%) 71%,
      hsl(282.63, 100%, 48.02%) 77.5%,
      hsl(280.2, 100%, 49.08%) 84.5%,
      hsl(278.66, 100%, 49.76%) 91.9%,
      hsl(278.12, 100%, 50%) 100%
    );
}
.anniu{
  margin-top: 100px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  position: relative;
  text-align: center;
}
.my-swipe {
  display: flex;
  /* width: 80%; */
}
.tu {
  position: absolute;
  top: 100px;
  width: 80%;
  border-radius: 8px;
  height: 140px;
  left: 10%;
}

.order_data {
  position: relative;
  top: 10px;
  margin-bottom: 100px;
  width: 100%;
}
.ka {
  display: flex;
  height: 100px;
  width: 90%;
  margin: 20px;
  box-shadow: 0 0 6px 0 #ccc;
  /* margin-right: 10px; */
  border-radius: 8px;
  /* background-color: turquoise; */
}
.juzhong{
  /* position:absolute; */
  display:flex;
  width: 100%;
  /* height: 80px; */
  margin:13px 13px;
  /* background-color:red; */
}
.tou {
  height: 100%;
  width: 74px;
  /* border-color:#000; */
  border-radius: 50%;
  background-color: darkblue;
  /* z-index: 2; */
}
.you{
  /* position: relative; */
  position: relative;
  flex: 2;
  margin-left: 20px;
  /* background-color: darkgoldenrod; */
  
}

.zhong{
  position:absolute;
  top: 30px;
  /* margin:20% 0; */
  font-size: 12px;
  /* background-color: tomato; */
}
.shijian{
  /* margin-left: 0; */
  position:absolute;
  bottom: 0;
  font-size: 12px;
  /* margin-bottom: 0%; */
  /* background-color: violet; */
}
.zhuangtai{
  position: absolute;
  font-size: 11px;
  color: #f8825d;
  right: 0%;
  top: 0;
}
.danjia{
  position: absolute;
  color: #FFCC00;
  right: 0%;
  bottom: 0;
}
</style>